<template>
	<a-modal
		title="领取详情"
		:width="1200"
		:bodyStyle="bodyStyle"
		:visible="visible"
		:confirmLoading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
		:destroyOnClose="true"
		:maskClosable="false"
	>
		<a-spin :spinning="confirmLoading">
			<s-table bordered :columns="columns" :data="loadListData" rowKey="uuid" ref="table" :scroll="{ x: 700 }" size="small" :isFirstLoad="false" :isRowSelection="false"></s-table>
		</a-spin>
	</a-modal>
</template>

<script>
import { ModalMixins, rowSelection } from '@/mixins';
let statelist = ['未使用', '已使用', '已过期', '已作废'];
const columns = [
	{
		title: '卡券编号',
		dataIndex: 'cardVoucherNo',
		key: 'cardVoucherNo',
		ellipsis: true,
		width: 300
	},
	{
		title: '领取用户',
		dataIndex: 'nickName',
		key: 'nickName'
	},
	{
		title: '孕妈/宝贝名称',
		dataIndex: 'birthName',
		key: 'birthName'
	},
	{
		title: '预产期',
		dataIndex: 'birthDate',
		key: 'birthDate'
	},
	{
		title: '手机号',
		dataIndex: 'mobileNo',
		key: 'mobileNo'
	},
	{
		title: '卡券状态',
		dataIndex: 'status',
		key: 'status',
		customRender: (text, index, record) => {
			return statelist[text + 1];
		}
	},
	{
		title: '过期时间',
		dataIndex: 'inValidDate',
		key: 'inValidDate'
	}
];
export default {
	name: 'userlistModal',
	mixins: [ModalMixins, rowSelection],
	data() {
		return {
			loading: false,
			columns: columns,
			record: null
		};
	},
	created() {},
	methods: {
		show(record) {
			this.visible = true;
			this.confirmLoading = false;
			this.record = record;
			this.$nextTick(() => {
				this.$refs.table.refresh();
			});
		},
		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleOk() {
			const _this = this;
			this.$emit('ok', this.record);
			this.visible = false;
		},
		handleCancel() {
			this.close();
		},
		loadListData(parameter) {
			return this.$postAction(
				this.$api.getDrawList,
				Object.assign(
					{},
					{ id: this.record.cardVoucherId },
					{
						pageNum: parameter.pageNum,
						pageSize: parameter.pageSize
					}
				)
			).then(res => {
				return res.data;
			});
		}
	}
};
</script>

<style scoped></style>
